import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

// Compiler: add imports
import { LocaleSwitcher } from "lingo.dev/react/client";
import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";

// NEW: bring in the full-bleed components
import AnnouncementBar from "@/components/AnnouncementBar";
import Navbar from "@/components/Navbar";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  // Compiler: wrap with LingoProvider and render LocaleSwitcher
  return (
    <LingoProvider
      loadDictionary={(Locale: string | null) => loadDictionary(Locale)}
    >
      <html lang="en">
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
          {/* Locale switcher (kept as-is) */}
          <div className="absolute top-2 right-3">
            <LocaleSwitcher
              locales={["en", "es", "zh", "ja", "fr", "de", "ru", "ar", "ko"]}
            />
          </div>

          {/* Full-bleed top bars */}
          <AnnouncementBar />
          <Navbar />

          {/* Page content */}
          {children}
        </body>
      </html>
    </LingoProvider>
  );
}
